<template>
  <div class="substance_edit-help">
    <el-card class="!border-none mt-4" shadow="never">
      <el-page-header
        :content="mode == 'add' ? '新增定时任务' : '编辑定时任务'"
        @back="$router.go(-1)"
      />
    </el-card>

    <el-card shadow="never" class="!border-none mt-4">
      <el-form
        :rules="rules"
        ref="formRef"
        :model="formData"
        label-width="120px"
      >
        <!-- 标题输入框 -->
        <el-form-item label="任务名称" prop="name">
          <el-input
            v-model="formData.name"
            show-word-limit
            placeholder="请输入任务名称"
            class="max-w-[300px]"
          ></el-input>
        </el-form-item>
        <el-form-item label="任务分组" prop="types">
          <el-select
            class="ls-input"
            v-model="formData.types"
            placeholder="请选择任务分组"
          >
            <el-option label="默认" value="default" />
            <el-option label="系统" value="system" />
          </el-select>
        </el-form-item>
        <el-form-item label="调用方法" prop="command">
          <el-input
            v-model="formData.command"
            class="max-w-[300px]"
            placeholder="请输入调用目标字符串"
          ></el-input>
        </el-form-item>
        <el-form-item label="cron表达式" prop="rules">
          <el-input
            v-model="formData.rules"
            class="max-w-[300px]"
            placeholder="请输入cron执行表达式"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            class="max-w-[300px]"
            :autosize="{ minRows: 3, maxRows: 6 }"
            :maxlength="200"
            show-word-limit
            clearable
            v-model="formData.remark"
            placeholder="多行输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="执行策略">
          <el-radio-group v-model="formData.strategy">
            <el-radio :label="1"> 立即执行 </el-radio>
            <el-radio :label="2"> 执行一次 </el-radio>
            <el-radio :label="3"> 放弃执行 </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否并发">
          <el-radio-group v-model="formData.concurrent">
            <el-radio :label="1"> 允许 </el-radio>
            <el-radio :label="0"> 禁止 </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="formData.status"
            :active-value="1"
            :inactive-value="2"
          />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- Footer Start -->
    <footer-btns>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </footer-btns>
    <!-- Footer End -->
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import {
  apiCrontabAdd,
  apiCrontabEdit,
  apiCrontabDetail
} from '@/api/setting/system'
import { PageMode } from '@/utils/enum'
import FooterBtns from '@/components/footer-btns/index.vue'
import { ElForm } from 'element-plus'
import feedback from '@/utils/feedback'
import useMultipleTabs from '@/hooks/useMultipleTabs'

type FormInstance = InstanceType<typeof ElForm>
const route = useRoute()
const router = useRouter()
const mode = ref<string>(PageMode['ADD']) // 当前页面: add-添加角色 edit-编辑角色

// 表单数据
const formData = reactive({
  id: '',
  name: '',
  types: 'default',
  command: '',
  rules: '',
  status: 1,
  strategy: 1,
  concurrent: 0,
  remark: ''
})

const formRef = shallowRef<FormInstance>()
const rules = reactive({
  name: [{ required: true, message: '请输入任务名称' }],
  command: [{ required: true, message: '请输入调用目标字符串' }],
  rules: [{ required: true, message: '请输入cron执行表达式' }]
})

const { removeTab } = useMultipleTabs()

const getDetails = async () => {
  const data = await apiCrontabDetail({
    id: route.query.id
  })
  Object.keys(formData).forEach(key => {
    //@ts-ignore
    formData[key] = data[key]
  })
}

const handleSave = async () => {
  await formRef.value?.validate()
  if (route.query.id) {
    await apiCrontabEdit(formData)
  } else {
    await apiCrontabAdd(formData)
  }
  feedback.msgSuccess('操作成功')
  removeTab()
  router.back()
}
onMounted(async () => {
  if (!route.query.id) {
    return
  }
  await getDetails()
})
</script>
